<template>
    <div>
        <!-- 首页组件 -->
        <HomeHeader></HomeHeader>
        <!-- 轮播图组件 -->
        <HomeSwiper :list="swiperList"></HomeSwiper>
        <!-- 图标组件 -->
        <HomeIcons :list="iconList"></HomeIcons>
        <!-- 热销推荐组件 -->
        <HomeRecommend :list="recommendList"></HomeRecommend>
        <!-- 周末游组件 -->
        <HomeWeekend :list="weekendList"></HomeWeekend>
    </div>
</template>

<script>
    import HomeHeader from './components/Header'
    import HomeSwiper from './components/Swiper'
    import HomeIcons from './components/Icons'
    import HomeRecommend from './components/Recommend'
    import HomeWeekend from './components/Weekend'
    import axios from 'axios'
    import {mapState} from 'vuex'
    export default {
        name:'Home',
        components:{ HomeHeader, HomeSwiper, HomeIcons, HomeRecommend, HomeWeekend },
        data() {
            return {
                swiperList: [],
                iconList:[],
                recommendList:[],
                weekendList: [],
                lastCity: '' //判断页面和请求城市是否相同
            }
        },
        computed:{
            ...mapState(['city'])
        },
        methods: {
            getHomeInfo(){
                axios.get(`https://aygzs.gitee.io/travel/mock/index.json?city=${this.city}`).then(
                     response => {
                        // console.log('收到了数据', response.data);
                        const data = response.data.data

                        if (response.data.ret && data) {
                            this.swiperList = data.swiperList
                            this.iconList = data.iconList
                            this.recommendList = data.recommendList
                            this.weekendList = data.weekendList
                        }
                    },
                    error => {
                        // console.log('请求失败!', error.message);
                        alert('请求失败!',error.message)
                    }
                )
            },
           
        },
        mounted() {
            this.lastCity = this.city
            this.getHomeInfo()
        },
        // 使用kepp-alive
        activated(){
            if(this.lastCity !== this.city)
            {
                this.lastCity = this.city
                this.getHomeInfo()
            }
        },
        deactivated(){},
    }
</script>

<style>

</style>